<template>
  <div class="topTabbar flex flex-evenly">
    <div class="topTabbarItem bold"
         v-for="(item,index) in topTabbar"
         :class="{select:currentIndex===index}"
         @click="click(index,item)">{{ item.title }}
    </div>
  </div>
</template>

<script>
import {list} from "../../data/itemList";

export default {
name: "typeTopTabbar",
  data(){
  return{
    topTabbar:[
      {title:"全部", type:"all"},
      {title:"水果", type:"fruit"},{title:"服装", type:"cloth"},{title:"电子产品", type:"electric"},
    ],
    currentIndex:0,
    dataListType:"all",
    newDataList:[],
    init:true,
  }
  },
  methods:{
    click(index,item){
      this.init=false;
      this.currentIndex=index;
      this.dataListType=item.type;
      this.newDataList.splice(0,this.newDataList.length)
      if(index===0){ this.newDataList=list.slice(0);}
      else{this.newDataListInit();}
      this.$emit("transnewDataList",this.newDataList);
      this.$emit("transInit",this.init);
    },
    newDataListInit(){
      var type=this.dataListType;
      var newData=this.newDataList;
      list.filter(function (n){
        if(n.typeEn===type) newData.push(n);
      })
    },
  }
}
</script>

<style scoped>
.topTabbar{
  background-color: #E9EBEB;
  position: fixed;
  top: 5rem;
  left: 0;
  right: 0;
}
.topTabbarItem{
  color: #000;
  font-size: 1.5rem;
  padding: 1rem 0;
}
.select{
  color: #DD001B;
  border-bottom: .5rem solid #DD001B;
}
</style>